import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';
import {SystemMgmtServices} from '../http/service';
import {HttpErrorResponse} from '@angular/common/http';

interface LineTableItem {
  id: number;
  lineName: string;
  lineCity: string;
  createUserName: string;
  createTime: string;

}


@Component({
  selector: 'system-line-mgmt',
  styleUrls: ['./components.less'],
  template: `
    <div class="dataMgmtContainer">
      <div class="data-mgmt-bar">
        <div><span>线路名称：</span><input nz-input placeholder="输入线路名称搜索" [(ngModel)]="keyword"/></div>
        <button nz-button nzType="primary" (click)="loadLineTable()">查询</button>
        <button nz-button style="background:'green';color:'#fff';border-color:'transparent'" (click)="isVisible = true">新增</button>
      </div>
      <nz-table #lineTable [nzShowSizeChanger]="true" [nzShowQuickJumper]="true"
                [nzData]="tableData" [nzLoading]="loading" [nzFrontPagination]="false"
                [nzTotal]="pagination.total" [(nzPageSize)]="pagination.size" [(nzPageIndex)]="pagination.start"
                (nzPageIndexChange)="pagination.start = $event;loadLineTable()"
                (nzPageSizeChange)="pagination.size = $event;loadLineTable()">
        <thead>
        <tr>
          <th>名称</th>
          <th>城市</th>
          <th>创建人</th>
          <th>创建时间</th>
          <th nzAlign="center">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of lineTable.data">
          <td>{{ data.lineName}}</td>
          <td>{{ data.lineCity }}</td>
          <td>{{ data.createPeople }}</td>
          <td>{{ data.createTime}}</td>
          <td class='option-td' nzAlign="center">
            <span (click)="isVisible = true;editData = data;this.lineForm.patchValue(data);mode='edit'">修改</span>
            <span (click)="deleteVisible = true;editData = data">删除</span>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </div>

    <nz-modal [(nzVisible)]="isVisible" [nzTitle]="modalTitle" (nzOnCancel)="isVisible = false;lineForm.reset()" (nzOnOk)="onSubmit()">
      <ng-template #modalTitle>{{mode === 'create' ? '新增' : '修改'}}线路</ng-template>
      <ng-container *nzModalContent>
        <form nz-form [formGroup]="lineForm">
          <nz-form-item>
            <nz-form-label nzRequired [nzSpan]="4">
              名称
            </nz-form-label>
            <nz-form-control nzErrorTip="请输入内容" [nzSpan]="16">
              <input nz-input formControlName="lineName"/>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzRequired [nzSpan]="4">
              城市
            </nz-form-label>
            <nz-form-control nzErrorTip="请输入内容" [nzSpan]="16">
              <input nz-input formControlName="lineCity"/>
            </nz-form-control>
          </nz-form-item>
        </form>
      </ng-container>
    </nz-modal>

    <nz-modal [(nzVisible)]="deleteVisible" nzTitle="警报" (nzOnOk)="onDelete()" (nzOnCancel)="deleteVisible=false">
      <ng-container *nzModalContent>
        您确认要删除？
      </ng-container>
    </nz-modal>
  `
})
export class LineMgmtComponent implements OnInit {
  constructor(private fb: FormBuilder, private http: SystemMgmtServices) {
  }

  lineForm!: FormGroup;
  isVisible = false;
  deleteVisible = false;
  mode = 'create';
  pagination = {
    start: 1,
    size: 10,
    total: 0
  };
  loading = true;
  keyword = '';
  tableData !: LineTableItem[];
  editData !: LineTableItem;

  loadLineTable(): void {
    const {start, size} = this.pagination;
    this.http.queryLine({start: start - 1, size, keyword: this.keyword}).subscribe(
      (response) => {
        if (response.code === 0) {
          this.tableData = response.data.content;
          this.pagination.total = response.data.totalElements;
          this.loading = false;
        }
      }, (error: HttpErrorResponse) => {
      }
    );
  }

  onCreate(successCallBack): void {
    this.http.createLine(this.lineForm.value).subscribe(
      (response) => {
        if (response.code === 0) {
          // this.loadLineTable();
          // this.isVisible = false;
          successCallBack();
        }
      }, (error: HttpErrorResponse) => {
      }
    );
  }

  onEdit(successCallBack, failCallBack?): void {
    this.http.editLine({...this.lineForm.value, id: this.editData.id}).subscribe(
      (response) => {
        if (response.code === 0) {
          successCallBack();
        }
      }, () => {
        failCallBack();
      }
    );
  }

  onDelete(): void {
    this.http.deleteLine(this.editData.id).subscribe(
      (response) => {
        if (response.code === 0) {
          this.loadLineTable();
          this.deleteVisible = false;
        }
      }, () => {
      }
    );
  };

  onSubmit(): void {
    const handleFn = () => {
      this.loadLineTable();
      this.isVisible = false;
      this.lineForm.reset();
    };
    if (this.mode === 'create') {
      this.onCreate(() => {
        handleFn();
      });
    } else {
      this.onEdit(() => {
        this.mode = 'create';
        handleFn();
      });
    }
  }

  ngOnInit(): void {
    this.loadLineTable();
    this.lineForm = this.fb.group({
      lineCity: [null],
      lineName: [null]
    });
  }

}
